<template>
	<div class="index" id="index" style="height: 100vh; overflow: auto;"  :class="dayu?'dayu':''">

    <!-- 加盟站点开始 -->
    <div v-if="all.join_switch && all.last_level == 0 && !user" style="position: fixed; right: 0; bottom: 2.8rem; z-index: 999; background: #fff; padding: 0.1rem; border-radius: 0.5rem 0 0 0.5rem; font-size: 0.28rem;" @click="go4('/jiameng')">
      <div class="flexc">
        <div class="flexcc" style=" width: 0.6rem; margin-right: 0.1rem; height: 0.6rem; background: rgb(227, 232, 241); border-radius: 0.3rem;">
          <img src="../../../static/img/jiameng11.png" style="width: 0.4rem;">
        </div>
        <div>加盟站点</div>
      </div>
    </div>
    <!-- 加盟站点结束 -->


    <!-- 分销商登录的话 -->
    <footers v-if="user"></footers>
    <!-- 分销商登录的话 -->

    <div style="width: 7.5rem; margin: 0px auto; padding-bottom: 0.8rem; ">
      <div style="position: relative; height: 5.1rem;">
        <img :src="all.top_pic" style="width: 7.5rem; height: 3rem;">

        <div style="position: absolute; top: 1.6rem; left: 0.3rem; width: 6.9rem; padding:0.2rem 0.3rem; background: rgb(255, 255, 255); box-shadow: 0px 0.1rem 0.3rem 0px rgba(0, 0, 0, 0.05); border-radius: 0.3rem;">
          <div class="flexbc">
            <div class="flexbc" style="padding-bottom: 0.2rem; width: 6.9rem;">
              <div class="flexc">
                <div style="position: relative;">
                  <img :src="all.left_pic" style="width: 0.9rem; height: 0.9rem;">
                </div>
                <div class="flexcc" style="width: 3.5rem;">
                  <div style="margin-left: 0.15rem;">
                    <div style="color: rgb(2, 12, 29); font-size: 0.3rem; ">{{all.store_name}}</div>
                    <div style="color: rgb(120, 125, 133); font-size: 0.22rem; width: 3.5rem; line-height: 0.3rem; height: 0.6rem; display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;">{{all.store_slogan}}</div>
                  </div>
                </div>
              </div>
              <div style="position: relative;" v-if="all.right_radio">
                <img :src="all.right_pic || 'https://test91.91haoka.cn/shouye9.png'" style="width: 1.58rem; height: 0.76rem;">
              </div>
            </div>
            <div style="height: 1px; width: 6.9rem; background: rgb(227, 232, 241); "></div>
            <div class="flex" style="justify-content: space-between; width: 6.9rem; padding-top: 0.2rem;">
              <div style="flex: 1;" @click="go('/query')">
                <div class="flexcc"><img src="../../../static/img/shouye3.png" style="width: 1rem; height: 1rem; margin-bottom: 0.1rem;"></div>
                <div class="flexcc" style="font-size: 0.24rem;">一键通查</div>
              </div>
              <div style="flex: 1;" @click="go('/query_order')">
                <div class="flexcc"><img src="../../../static/img/shouye4.png" style="width: 1rem; height: 1rem; margin-bottom: 0.1rem;"></div>
                <div class="flexcc" style="font-size: 0.24rem;">订单查询</div>
              </div>
              <div style="flex: 1;" @click="show3 = true">
                <div class="flexcc" style="position: relative;">
                  <img src="../../../static/img/shouye5.png" style="width: 1rem; height: 1rem; margin-bottom: 0.1rem;">
                </div>
                <div class="flexcc" style="font-size: 0.24rem;">联系客服</div>
              </div>
              <div style="flex: 1;" @click="showewm">
                <div class="flexcc"><img src="../../../static/img/shouye6.png" style="width: 1rem; height: 1rem; margin-bottom: 0.1rem;"></div>
                <div class="flexcc" style="font-size: 0.24rem;">分享店铺</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- <div style="padding:0 0.3rem 0.3rem;">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item2 in all.pics" :key="item2.id">
            <img :src="item2.img" style="width: 100%; border-radius: 0.3rem;" @click="go3(item2.img_url)">
          </van-swipe-item>
        </van-swipe>
      </div> -->
      <div v-for="(itemx,indexx) in all.json" :key="indexx">
          <div class="flexcc" style="margin: 0px auto 20px; position: relative;  border-radius: 10.5px; width: 6.9rem;" v-if="itemx.type == 3" >
            <div style="background: rgb(220, 227, 238); border-radius: 10.5px; width: 6.9rem; overflow: hidden; "  v-if="all.json.length > 0">

              <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item2,index2) in itemx.list" :key="index2">
                  <img :src="item2.img" @click="go3(item2.img_url)">
                </van-swipe-item>
              </van-swipe>

            </div>
          </div>

          <div style="width: 6.9rem; font-size: 12px; margin: 0px auto 20px; border-radius: 10.5px; overflow: hidden;" class="flexcc" v-if="itemx.type == 1" >
            <div v-if="itemx.img"><img :src="itemx.img" @click="go3(itemx.url)" style="width: 100%;"></div>
          </div>

          <div style="width: 6.9rem; font-size: 12px; margin: 0px auto 20px;  border-radius: 10.5px;" class="flexcc" v-if="itemx.type == 2" >
            <div v-if="itemx.txt" style="width:100%;">{{itemx.txt}}</div>
          </div>
      </div>


      <div class="flex" style="justify-content: space-around; padding:0 0.3rem;">
        <div class="flexcc" style="background: rgb(227, 232, 241); border-radius: 0.3rem; width: 1.2rem; height: 0.6rem; font-size: 0.28rem;" @click="search('')" :class="operator == ''?'act':''">全部</div>
        <div class="flexcc" style="background: rgb(227, 232, 241); border-radius: 0.3rem; width: 1.2rem; height: 0.6rem; font-size: 0.28rem;" @click="search('10086')" :class="operator == '10086'?'act':''">移动</div>
        <div class="flexcc" style="background: rgb(227, 232, 241); border-radius: 0.3rem; width: 1.2rem; height: 0.6rem; font-size: 0.28rem;" @click="search('10010')" :class="operator == '10010'?'act':''">联通</div>
        <div class="flexcc" style="background: rgb(227, 232, 241); border-radius: 0.3rem; width: 1.2rem; height: 0.6rem; font-size: 0.28rem;" @click="search('10000')" :class="operator == '10000'?'act':''">电信</div>
        <div class="flexcc" style="background: rgb(227, 232, 241); border-radius: 0.3rem; width: 1.2rem; height: 0.6rem; font-size: 0.28rem;" @click="search('10099')" :class="operator == '10099'?'act':''">广电</div>
      </div>
      <div style="padding: 0.3rem;">
        <div style="background: rgb(255, 255, 255); box-shadow: 0px 0.1rem 0.3rem 0px rgba(0, 0, 0, 0.05); border-radius: 0.3rem; position: relative; padding: 0.2rem; margin-bottom: 0.3rem;" v-for="item in list" :key="item.id">
          <div style="position: absolute; left: 0; top: 0;"><img src="../../../static/img/shouye7.png" style="width: 0.85rem; height: 0.85rem;" v-if="item.is_main"></div>
          <div class="flex">
            <div><img :src="item.image1  || 'https://91haoka.cn/gth/static/img/kenan.jpg'" style="width: 2rem; height: 2rem; margin-right: 0.2rem; border-radius: 0.1rem;"></div>
            <div style="width: 4.3rem;">
              <div style="font-size: 0.26rem; margin-bottom: 0.2rem;" v-if="!item.sale_name">{{item.title}}</div>
              <div style="font-size: 0.26rem; margin-bottom: 0.2rem;" v-if="item.sale_name">{{item.sale_name}}</div>
              <div style="font-size: 0.18rem; color: rgb(254, 61, 61); margin-bottom: 0.2rem;">{{item.points}}</div>
              <div class="flexc">
                <div class="flexcc" style="width: 4.7rem; flex: 1;">
                  <div>
                    <div style="font-size: 0.28rem; margin-bottom: 0.1rem; font-weight: bold;" class="flexcc">
                      <span v-if="item.liuliang">{{item.liuliang}}</span>
                      <span v-if="!item.liuliang">
                        <span v-if="item.liuliang === 0">0</span>
                        <span v-if="!item.liuliang === 0">--</span>
                      </span>
                      <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="item.liuliang || item.liuliang === 0">G</span>
                    </div>
                    <div style="color: rgb(120, 125, 133); font-size: 0.22rem;" class="flexc">通用流量</div>
                  </div>
                </div>
                <div style="width: 1px; height: 0.2rem; background: rgb(227, 232, 241);"></div>
                <div class="flexcc" style="width: 4.7rem; flex: 1;">
                  <div>
                    <!-- <div style="font-size: 0.28rem; margin-bottom: 0.1rem; font-weight: bold;" class="flexcc">{{item.dx_liuliang || '--'}}<span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="item.dx_liuliang">G</span></div> -->
                    <div style="font-size: 0.28rem; margin-bottom: 0.1rem; font-weight: bold;" class="flexcc">
                      <span v-if="item.dx_liuliang">{{item.dx_liuliang}}</span>
                      <span v-if="!item.dx_liuliang">
                        <span v-if="item.dx_liuliang === 0">0</span>
                        <span v-if="!item.dx_liuliang === 0">--</span>
                      </span>
                      <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="item.dx_liuliang || item.dx_liuliang === 0">G</span>
                    </div>
                    <div style="color: rgb(120, 125, 133); font-size: 0.22rem;" class="flexc">定向流量</div>
                  </div>
                </div>
                <div style="width: 1px; height: 0.2rem; background: rgb(227, 232, 241);"></div>
                <div class="flexcc" style="width: 4.7rem; flex: 1;">
                  <div>
                    <div style="font-size: 0.28rem; margin-bottom: 0.1rem; font-weight: bold;" class="flexcc">
                      <span v-if="item.yuyin">{{item.yuyin}}</span>
                      <span v-if="!item.yuyin">
                        <span v-if="item.yuyin === 0">0</span>
                        <span v-if="!item.yuyin === 0">--</span>
                      </span>
                      <!-- <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="item.liuliang || item.liuliang === 0">G</span> -->
                      <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="item.yuyin_type == 0 && (item.yuyin || item.yuyin === 0)">分钟</span>
                      <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="item.yuyin_type == 1">元/分钟</span>
                    </div>

                    <!-- <div style="font-size: 0.28rem; margin-bottom: 0.1rem; font-weight: bold;" class="flexcc">{{item.yuyin || '--'}}
                      <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="item.yuyin_type == 0 && item.yuyin">分钟</span>
                      <span style="font-size: 0.22rem; position: relative; top: 1px;" v-if="item.yuyin_type == 1">元/分钟</span>
                    </div> -->
                    <div style="color: rgb(120, 125, 133); font-size: 0.22rem;" class="flexc">通话时长</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex" style="margin-top: 0.25rem;">
            <div style="background: rgb(255, 223, 223); border-radius: 0.18rem; padding: 0.06rem 0.15rem; font-size: 0.2rem; color: rgb(254, 61, 61); margin-right: 0.2rem; margin-bottom: 0.2rem;" v-if="item.selling_point.length>0 && item.selling_point[0]">{{item.selling_point[0]}}</div>
            <div style="background: rgb(223, 255, 228); border-radius: 0.18rem; padding: 0.06rem 0.15rem; font-size: 0.2rem; color: rgb(8, 143, 26); margin-right: 0.2rem; margin-bottom: 0.2rem;" v-if="item.selling_point.length>0 && item.selling_point[1]">{{item.selling_point[1]}}</div>
            <div style="background: rgb(233, 241, 255); border-radius: 0.18rem; padding: 0.06rem 0.15rem; font-size: 0.2rem; color: rgb(0, 90, 255); margin-right: 0.2rem; margin-bottom: 0.2rem;" v-if="item.selling_point.length>0 && item.selling_point[2]">{{item.selling_point[2]}}</div>
            <div style="background: rgb(246, 248, 251); border-radius: 0.18rem; padding: 0.06rem 0.15rem; font-size: 0.2rem; color: rgb(120, 125, 133); margin-bottom: 0.2rem;" v-if="item.selling_point.length>0 && item.selling_point[3]">{{item.selling_point[3]}}</div>
          </div>
          <div class="flexbc">
            <div style="width: 1.59rem; height: 0.6rem; background: rgb(233, 241, 255); border-radius: 0.4rem; font-size: 0.28rem; color: rgb(0, 90, 255);" class="flexcc">
              <div style="cursor: pointer;" @click="fenxianglogs(item)">分享</div>
              <div><img src="../../../static/img/shouye8.png" style="width: 0.2rem; margin-left: 0.1rem;"></div>
            </div>
            <div @click="go2(item)" class="flexcc" style="background: rgb(0, 90, 255); width: 4.76rem; height: 0.6rem; box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 90, 255, 0.1); border-radius: 0.3rem; font-size: 0.28rem; color: rgb(255, 255, 255);">立即办理  <span style="margin-left:5px" v-if='item.card_cost!="0.00"'>￥{{ item.card_cost }}</span></div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="show3" position="center" style="border-radius: 0.5rem;">
      <div style="padding: 0.6rem 0.3rem; text-align: center;">
        <div style="font-size: 0.36rem; font-weight: bold; margin-bottom: 0.4rem;">联系客服</div>
        <div style="margin-bottom: 0.2rem;" class="flexcc"><img :src="all.img || 'https://file.storep.91haoka.cn/kefuweishezhi.png'" style="width: 3.2rem;"></div>
        <div style="margin-bottom: 0.2rem; font-size: 0.2rem; color: rgb(120, 119, 119);">长按识别二维码加我为好友</div>
        <div style="margin-bottom: 0.2rem; font-size: 0.18rem; color: rgb(178, 177, 177);">非微信环境请截图保存在微信内扫一扫选择相册</div>
        <div @click="lianxi" style="background: rgb(0, 90, 255); border-radius: 0.4rem; font-size: 0.28rem; width: 4.5rem; height: 0.8rem; color: #fff; margin-top: 0.3rem; margin-bottom: 0.2rem;" class="flexcc">联系客服</div>
        <div style="margin-bottom: 0.1rem; font-size: 0.18rem; color: rgb(120, 119, 119);">直接打开微信聊天窗口与我沟通</div>
      </div>
    </van-popup>


    <van-popup v-model="show5" position="center" style="border-radius: 0.5rem;">
      <div style="padding: 0.6rem 0.3rem; text-align: center; width: 6.6rem;">

        <!-- <div v-if="!all.store_poster && this.$route.query.shop_id" class="t_qrcode" ref="qrCodeUrl"></div> -->
      <!--  <div v-if="!all.store_poster && this.$route.query.shop_id">
          <erweimashengcheng></erweimashengcheng>
        </div> -->

        <!-- <div v-if="all.store_poster">
          <img :src="all.store_poster" style="width: 6rem;">
          <div style="margin-top: 0.5rem; font-size: 0.33rem; color: rgb(120, 119, 119);" @click="xiazai">保存</div>
        </div> -->

        <canvas999 ref="canvas999" v-if="show5"></canvas999>
      </div>
    </van-popup>

    <van-popup v-model="fenxiangtulog" style="background: #fff !important; width: 6.5rem;">
    	<div><img src="../../../static/img/loginbg.png"></div>
      <div style="font-size: 16px; padding: 0.3rem 0 0 0.3rem; font-weight: bold;">
        {{xuanzhongde.title}}
      </div>
      <div class="flex" style="padding:0.3rem;">
        <div id="qrcode"></div>
        <div style="margin-left: 0.3rem;" class="flexcc">
          <div>
            <div style="font-size: 12px;">长按识别二维码 进入下单链接</div>
            <div style="color: rgb(154, 154, 154); margin-top: 0.2rem; font-size: 14px;">正规授权 真实可靠</div>
          </div>
        </div>
      </div>
      <div class="flex" style="justify-content: space-around; margin-top: 30px;">
        <div style="width: 98px; height: 42px; font-size: 14px; background: rgb(213, 213, 213);  cursor: pointer; border-radius: 24px;" class="flexcc" @click="fenxiangtulog = false">关闭</div>
        <div style="width: 98px; height: 42px; font-size: 14px; background: rgb(64, 156, 255);  cursor: pointer; color: rgb(255, 255, 255); border-radius: 24px;" class="flexcc" @click="haibao">下载</div>
      </div>
    </van-popup>

    <van-popup v-model="fenxiangtulog2" style="width: 7.5rem; background: #fff !important;">
    	<img :src="img3" style="width: 100%;">
    </van-popup>
	</div>
</template>


<script>
  import erweimashengcheng from './erweimashengchengxiazai.vue'
  import * as qiniu from 'qiniu-js'
  import QRCode from 'qrcodejs2'
  import chuantu from '@/components/chuantu.vue'
  import { random } from 'lodash'
  import footers from './footers.vue'
  import canvas999 from './zujian/canvas999.vue'
	export default {
    components:{
      chuantu,footers,erweimashengcheng,canvas999
    },
		name: 'index',
		data() {
			return {
        show3:false,
        show5:false,
        all:{
          selling_point:[]
        },
        list:[],
        operator:"",

        xuanzhongde:"",
        img2:"",
        fenxiangtulog:false,

        img3:"",
        fenxiangtulog2:false,

        user:"",
        latitude: null, // 纬度
        longitude: null // 经度
			}
		},
		created() {

      if(!this.$route.query.shua){
        if(location.search){
          location.href = location.href + '&shua=1'
        }else{
          location.href = location.href + '?shua=1'
        }
      }

      let url = ""
      let url2 = ""
      if(this.$route.query.shop_id){
        //那就是分销商的店铺

        url = '/api/mstore/info?shop_id='+window.atob(this.$route.query.shop_id)
        url2 = `/api/page/list?shop_id=${window.atob(this.$route.query.shop_id)}&page=1&page_size=200&operator=${this.operator}`
      }else{
        //有shops_id就是页面
        if(this.$route.query.shops_id){
          url = `/api/flow/storeinfo?id=${this.$route.query.shops_id}`
          url2 = `/api/fpage/list?tab=${this.$route.query.shops_id}&page=1&page_size=200&operator=${this.operator}`
        }else{
          //都没有就是管理员店铺
          url = '/api/mstore/info'
          url2 = `/api/page/list?page=1&page_size=200&operator=${this.operator}`
        }
      }

      this.getinfo(url)
      this.getlist(url2)

      axios.get('/agent/auth/user').then((response)=>{
      	if (response.data.msg.code == 0) {
         this.user = response.data.data
         localStorage.setItem('user',JSON.stringify(response.data.data))
      	}else {
          this.user = ""
      	}
      })
      // 

      
     
		},
		mounted() {

      //pc端用
      if(window.screen.width > 1080){
        this.dayu = true

        var h = 500 / 7.5 + 'px';
        document.documentElement.style.fontSize = h;
      }

      document.getElementById('index').addEventListener('scroll',()=>{
        localStorage.setItem('scrollTop',document.getElementById('index').scrollTop)
      })

      this.backtop()


		},
		methods: {
      backtop:function(){
        this.$router.beforeEach((to, from, next) => {
          next()
          if(from.path == '/order' && to.path == '/index'){
            this.$nextTick(()=>{
              document.getElementById('index').scroll(0,localStorage.getItem('scrollTop'))
            })
          }else{
            axios.get('/agent/auth/user').then((response)=>{
            	if (response.data.msg.code == 0) {
               this.user = response.data.data
               localStorage.setItem('user',JSON.stringify(response.data.data))
            	}else {
                this.user = ""
            	}
            })
          }
        })
      },
      go4:function(url){
        // this.$router.push({
        //   path:url+location.search,
        // })
        if(this.$route.query.shops_id){
          this.$router.push({
            path:'/jiameng',
            query:{
              shops_id:this.$route.query.shops_id
            }
          })
        }else{
          if(this.$route.query.shop_id){
            this.$router.push({
              path:'/jiameng',
              query:{
                shop_id:this.$route.query.shop_id
              }
            })
          }else{
            this.$router.push({
              path:'/jiameng'
            })
          }
        }


        // this.$router.push({
        //   path:'/jiameng',
        //   query:{
        //     id:item.id,
        //     shop_id:this.$route.query.shop_id
        //   }
        // })

      },
      go3:function(url){
        window.location.href = url
      },
      go2:function(item){

        if(this.$route.query.shops_id){
          this.$router.push({
            path:'/order',
            query:{
              id:item.id,
              shops_id:this.$route.query.shops_id
            }
          })
        }else{
          this.$router.push({
            path:'/order',
            query:{
              id:item.id,
              shop_id:this.$route.query.shop_id
            }
          })
        }

      },
      fenxianglogs:function(item){
        this.xuanzhongde = item
        let erweima = ""
        if(this.$route.query.shops_id){
          erweima = `${location.origin}/h5/order?id=${this.xuanzhongde.id}&shops_id=${this.$route.query.shops_id}`
        }else{
          if(this.$route.query.shop_id){
            erweima = `${location.origin}/h5/order?id=${this.xuanzhongde.id}&shop_id=${this.$route.query.shop_id}`
          }else{
            erweima = `${location.origin}/h5/order?id=${this.xuanzhongde.id}`
          }
        }
        let share_img = ''
        if(this.xuanzhongde.share_img){
          share_img = this.xuanzhongde.share_img
        }else{
          if(this.xuanzhongde.image1){
            share_img = this.xuanzhongde.image1
          }
        }
        this.$router.push({
          path:"/haibao",
          query:{
            share_img:share_img,
            logo:this.all.left_pic,
            erweima:erweima,
            title:this.xuanzhongde.title,
            shopname:this.all.store_name
          }
        })

        // this.$nextTick(()=>{
        //   let url2 = "https://www.baidu.com"
        //   var d = document.createElement('div')
        //   d.setAttribute('id','erweimadiv')
        //   document.body.appendChild(d)
        //   var qrcode = new QRCode(document.getElementById('erweimadiv'), {
        //       text: url2,
        //       width: 220,
        //       height: 220,
        //       colorDark : "#000000",
        //       colorLight : "#ffffff",
        //       correctLevel : QRCode.CorrectLevel.H
        //   })
        //   var canvas = document.getElementById("erweimadiv").getElementsByTagName("canvas")[0];
        //   this.img2 = canvas.toDataURL("image/png");

        //   this.haibao()
        // })
      },
      haibao:function(item){
      	var that = this
      	var canvas = document.createElement('canvas')
      	canvas.width = 750
      	canvas.height = 300
      	var ctx = canvas.getContext('2d');
      	var canvas_h = 0
      	var img = new Image();
      	let p = new Promise((res,rej)=>{
      		if(this.xuanzhongde.share_img){
      			img.src = this.xuanzhongde.share_img
      			img.setAttribute("crossOrigin",'Anonymous')
      			img.onload = function() {
      				let img_w = 750
      				let bili = 750 / img.width
      				let img_h = parseInt(img.height * bili)
      				canvas_h = img_h
      				canvas.setAttribute("height", canvas_h + 400);
      				ctx.drawImage(img,0,0,img_w,img_h);  // 将图像绘制到Canvas上
      				res('ok')
      			};
      			img.onerror = function(err){
      				// that.msg = JSON.stringify(err)
      			}
      		}else{
      			res('ok')
      		}
      	})
      	p.then(()=>{

      		var img2 = new Image();
      		img2.src = this.img2
      		img2.setAttribute("crossOrigin",'Anonymous')
      		img2.onload = function() {

            ctx.fillStyle = '#000';
            ctx.font = "bold 16px serif";
            ctx.fillText(that.xuanzhongde.title,30,canvas_h+30)

            ctx.drawImage(img2,80,canvas_h+60,220,220);

            ctx.fillStyle = '#000';
            ctx.font = "16px serif";
            ctx.fillText('长按识别二维码 进入下单链接',80,canvas_h+310)


            var img22 = new Image();
            img22.src = that.all.top_pic
            img22.setAttribute("crossOrigin",'Anonymous')
            console.log(img22)
            img22.onload = function() {
              ctx.drawImage(img22,580,canvas_h+180,120,120);
              var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
              for(var i = 0; i < imageData.data.length; i += 4) {
              	if(imageData.data[i + 3] == 0) {
              		imageData.data[i] = 255;
              		imageData.data[i + 1] = 255;
              		imageData.data[i + 2] = 255;
              		imageData.data[i + 3] = 255;
              	}
              }
              ctx.putImageData(imageData, 0, 0);
              var url = canvas.toDataURL('image/png');
              that.img3 = url
              that.fenxiangtulog2 = true
              var addElement = document.createElement('a')
              addElement.href = url
              addElement.download = "海报.png"
              document.body.appendChild(addElement)
              addElement.click();
              document.body.removeChild(addElement);
            }
      		}
      	})
      },
      lianxi:function(){
        window.location.href = this.all.cust_url
      },
      xiazai:function(){
        var a = document.createElement('a');
         a.download = '海报';//这边是文件名，可以自定义
         a.href = this.all.store_poster + '?attname=';
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);

      },
      creatQrCode(url) {
        this.$refs.qrCodeUrl.innerHTML = ""
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: url, // 需要转换为二维码的内容
            // width: 310,
            // height: 310,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
      },
      search:function(val){

        this.operator = val

        let url2 = ""
        if(this.$route.query.shop_id){
          //那就是分销商的店铺
          url2 = `/api/page/list?shop_id=${window.atob(this.$route.query.shop_id)}&page=1&page_size=200&operator=${this.operator}`
        }else{
          //有shops_id就是页面
          if(this.$route.query.shops_id){
            url2 = `/api/fpage/list?tab=${this.$route.query.shops_id}&page=1&page_size=200&operator=${this.operator}`
          }else{
            //都没有就是管理员店铺
            url2 = `/api/page/list?page=1&page_size=200&operator=${this.operator}`
          }
        }
        this.getlist(url2)
      },

      getimg:function(item){
        this.all.top_pic = item
      },

      getinfo:function(url){
        axios.get(url).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.all = response.data.data
            if(this.all.json){
              this.all.json = JSON.parse(this.all.json)
            }
            document.title = this.all.store_name
        	} else {
            vant.Toast(response.data.msg.info);
        	}
        })
      },
      getlist:function(url2){
        axios.get(url2).then((response)=>{
        	if (response.data.msg.code == 0) {
            response.data.data.data.forEach(item=>{
              item.yuyin = parseFloat(item.yuyin)
              if(item.selling_point){
                item.selling_point = JSON.parse(item.selling_point)
              }else{
                item.selling_point = []
              }
            })
            this.list = response.data.data.data
        	} else {
        		vant.Toast(response.data.msg.info);
        	}
        })
      },
      showewm(){
        this.show5 = true
        // if(this.$route.query.shop_id){

        //   setTimeout(()=>{

        //     this.creatQrCode(window.location.href)

        //   },200)
        // }
      },
    

		}
	}
</script>

<style scoped>
.t_qrcode{
width: 100%;

}
/deep/.t_qrcode img{
  width: 100% !important;
}
</style>
<style scoped lang="less">

  /deep/ .el-dialog{ background: rgb(246, 248, 251); border-radius: 29px;}
  .xianshi{background: rgb(64, 156, 255) !important; color: #fff !important;}
  .act{background: rgb(0, 90, 255) !important; color: #fff;}

  .qrCodeUrl{ width: 6rem;
    img{ width: 6rem;}
  }
</style>
